<template>
  <div id="loginView">
    <div class="logoImage">
      <a-space
      ><img src="/src/assets/logo.png" alt="logo"/>
        <h2>欢迎登录 {{ systemConstant.WEB_NICKNAME }}</h2></a-space
      >
    </div>
    <div class="loginDiv">
      <a-form
          :model="form"
          :style="{ textAlign: 'center', width: '400px', margin: '0 auto', background: '#fff', border: '1px solid #ccc', borderRadius: '5px', padding: '15px 25px 0 15px' }"
          @submit="handleSubmit"
      >
        <a-form-item
            field="username"
            tooltip="电话、邮箱、用户名"
            label="账号"
        >
          <a-input v-model="form.username" placeholder="请输入账号"/>
        </a-form-item>
        <a-form-item field="password" label="密码" tooltip="密码不少于8位">
          <a-input-password
              v-model="form.password"
              placeholder="请输入密码"
              @keyup.enter="handleSubmit"
          />
        </a-form-item>
        <a-form-item v-if="errMsg">
          <a-alert type="error">{{ errMsg }}</a-alert>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit">登录</a-button>
          <div style="text-align: right; width: 100%">
            <router-link :to="{ name: 'Register' }"
            >没有账号？立即注册
            </router-link>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import systemConstant from "/src/common/constant/system"

const router = useRouter();
const route = useRoute();
const store = useStore();
const errMsg = ref("");
const form = reactive({
  username: "",
  password: "",
});
const handleSubmit = async () => {
  const res = await store.dispatch("user/login", form);
  if (res === true) {
    const redirect = route.query.redirectName ?? "Home";
    router.replace({
      name: redirect as string,
    });
  } else {
    errMsg.value = res.msg;
  }
};

onMounted(() => {

})
</script>

<style scoped>
.logoImage {
  text-align: center;
  margin-bottom: 20px;
}

.logoImage img {
  height: 58px;
}
</style>
